<template>
  <div ref="player" :id="id" style="width: 100%; height: 100%; font-size: 18px"></div>
</template>

<script>
import config from './config.js';
import loadScript from '../../../utils/loadScript.js';

export default {
  name: 'HZPlayer',
  props: {
    /* 播放可以使用 通道编码 或者 监控点编号+通道号 */
    /* 通道编码 */
    channel_id: { default: undefined },
    /* 监控点编号 */
    camera_id: { default: undefined },
    /* 通道号 */
    channel_no: { default: undefined },
    camera_name: { default: undefined },
    /* 录像类型  0-中心录像，1-设备录像 */
    record_type: { default: 0 },
    start_time: { default: undefined },
    end_time: { default: undefined },
    playbackMode: { default: false },
  },
  data() {
    return {
      id: 'HZPlayer-' + Date.now(),
    };
  },
  computed: {
    playerParams() {
      if (!this.channel_id && !(this.camera_id && this.channel_no)) {
        return null;
      }
      const res = {
        // camera_name: this.camera_name,
      };
      if (this.channel_id) {
        res.channel_id = this.channel_id;
      }
      if (this.camera_id) {
        res.camera_id = this.camera_id;
      }
      if (this.channel_no) {
        res.channel_no = this.channel_no;
      }
      if (this.playbackMode === true) {
        res.record_type = this.record_type;
        res.start_time = this.start_time;
        res.end_time = this.end_time;
      }
      console.log(res);
      return res;
    },
  },
  async mounted() {
    await loadScript('/HZPlayerPlugin/webBrowserPlayer.js');
    await loadScript('/HZPlayerPlugin/playerExtends.js');
    await loadScript('/HZPlayerPlugin/playbackExtends.js');
    await this.init();
    await this.create();
    this.canceler = this.$watch(
      () => this.playerParams,
      (params) => {
        if (!params) return;
        // debugger;
        this.playbackMode === true ? this.playback(params) : this.play(params);
      },
      { immediate: true }
    );
  },
  unmounted() {
    if (this.canceler) {
      this.canceler();
    }
    if (this.ins) {
      this.ins.destroy();
    }
  },
  methods: {
    async init() {
      await new Promise((resolve, reject) => {
        const container = this.$refs.player;
        this.ins = WebPlugin({
          container: container,
          // autoClipSelectors: ['#' + this.id],
          successCallback: () => {
            resolve();
          },
          errorCallback: () => {
            this.$message.error('华智播放器实例化失败!');
            reject();
          },
        });
      });
    },
    async create() {
      const res = await this.ins.JS_RequestInterface({
        method: 'system.init',
        data: {
          ip: config.ip,
          port: config.port,
          username: config.username,
          password: config.password,
        },
      });
      if (res.code === 0) {
        this.ins.JS_RequestInterface({
          method: 'window.create',
          data: { layout: '1x1' },
        });
      } else {
        this.$message.error(res.message || '华智播放器登录失败!');
      }
    },
    play(params) {
      params = Object.assign({}, params, {
        // gpu_mode: 1,
        // window_id: 1,
      });
      // debugger;
      this.ins.JS_RequestInterface({
        method: 'play.preview',
        data: params,
      });
    },
    playback(params) {
      params = Object.assign({}, params, {
        gpu_mode: 1,
        window_id: 1,
        show_timebar: 1,
      });
      this.ins.JS_RequestInterface({
        method: 'play.playback',
        data: params,
      });
    },
  },
};
</script>
